{% extends 'manage.html' %}
{% load static %}
{% load dashboard %}
{% load issues %}
{% block title %}
    项目管理-概述
{% endblock %}

{% block css %}
    <style>
        a:hover {
            text-decoration: none;
        }

        .content {
            margin: 15px 20px;
        }

        .right-table > tbody > tr > .label-left {
            width: 100px;
        }

        .right-table > tbody > tr > td {
            border: 0;
        }

        .status-context {
            height: 80px;
            text-align: center;
            margin-bottom: 10px;
        }

        .count {
            font-size: 30px;
        }

        .user_item .title {
            font-size: 20px;
            font-weight: bold;
        }

        .user_item .avatar, .top-ten .avatar {
            float: left;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            display: inline-block;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            color: white;
            background-color: #304659;
        }

        .user_item .item {
            margin: 10px auto;
        }

        .user_item .text {
            line-height: 30px;
            font-size: 20px;
            font-weight: lighter;
        }

        .top-ten table tr {
            border-bottom: 1px grey solid;
        }

        .top-ten table tr td {
            padding: 5px 10px;
        }
    </style>
{% endblock %}


{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-chart-area"></i> 新增问题趋势
                    </div>
                    <div class="card-body">
                        <div id="charts">

                        </div>
                    </div>
                </div>

                <div class="row" style="margin-top: 20px">
                    {# 问题 #}
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <i class="far fa-question-circle"></i> 问题
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    {% for key, item in status_dict.items %}
                                        <div class="col-sm-4 status-context">
                                            <a href="{% url 'manage:issues' project_id=request.tracer.project.id %}?status={{ key }}">
                                                <div class="count">{{ item.count }}</div>
                                                <div>{{ item.text }}</div>
                                            </a>
                                        </div>
                                    {% endfor %}
                                </div>

                            </div>
                        </div>
                    </div>
                    {# 项目成员 #}
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <i class="fas fa-users"></i> 项目成员
                            </div>
                            <div class="card-body user_item">
                                <div class="clearfix">
                                    <div class="title">创建者</div>
                                    <div class="item">
                                        <div class="avatar">{{ request.tracer.project.creator.username.0 | upper }} </div>
                                        <div class="text">{{ request.tracer.project.creator.username }}</div>
                                    </div>
                                </div>

                                <div>
                                    <div class="title">参与者</div>
                                    <div class="item">
                                        {% for item in user_list %}
                                            <div class="avatar">{{ item.1.0 | upper }}</div>
                                            <div class="text">{{ item.1 }}</div>
                                        {% endfor %}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                {# 详情 #}
                <div class="card">
                    <div class="card-header">
                        <i class="fas fa-cog"></i> 详情
                    </div>
                    <div class="card-body">
                        <table class="table right-table">
                            <tbody>
                            <tr>
                                <td class="label-left">项目名称:</td>
                                <td>{{ request.tracer.project.name }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目描述:</td>
                                <td>{{ request.tracer.project.ddesc }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">创建时间:</td>
                                <td>{{ request.tracer.project.create_datetime }}</td>
                            </tr>
                            <tr>
                                <td class="label-left">项目空间:</td>
                                <td>{% use_space request.tracer.project.use_space %}
                                    / {{ request.tracer.price_policy.project_space }} GB
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                {# 动态 #}
                <div class="card" style="margin-top: 20px">
                    <div class="card-header">
                        <i class="fas fa-tasks"></i> 动态
                    </div>
                    <div class="card-body top-ten">
                        <table>
                            <tbody>
                            {% for item in top_ten %}
                                <tr>
                                    <td>
                                        <div class="avatar">{{ item.creator.username.0 | upper }}</div>
                                    </td>
                                    <td>
                                        <div>{{ item.creator.username }}</div>
                                        <div>
                                            指派 <a
                                                href="{% url 'manage:issues_detail' project_id=request.tracer.project.id issues_id=item.id %}">{% str_len item.id %}</a>
                                            给 {{ item.assign.username }}
                                        </div>
                                    </td>
                                    <td style="width: 250px; text-align: center">
                                        <div>{{ item.create_datetime }}</div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'plugings/highcharts/highcharts.js' %}"></script>
    <script src="{% static 'plugings/highcharts/zh-CN.js' %}"></script>
    <script>
        var INIT_CHART = '{% url 'manage:issues_chart' project_id=request.tracer.project.id %}'
        // 设置时间
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        })
        $(function () {
            InitCharts();
        })

        function InitCharts() {
            config = {
                title: {
                    text: null
                },
                credits: {
                    enabled: false
                },
                yAxis: {
                    title: {
                        text: '问题数量'
                    },
                    allowDecimals: false,
                    // 确保刻度间隔为 1
                    tickInterval: 1,
                    // 确保图表从 0 开始
                    min: 0
                },
                xAxis: {
                    type: 'datetime',  //x轴的显示类型

                    tickInterval: 60 * 60 * 24 * 1000,  //显示时间间隔
                    // 显示格式
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value)
                        },
                        rotation: -30  // 日期偏移量，变为斜着的
                    }
                },
                legend: {
                    enabled: false
                },
                // 鼠标悬浮显示
                tooltip: {
                    headerFormat: '<b>{point.key}</b>',
                    pointFormat: '<span style="color: {series.color}">\u25CF</span> 数量: {point.y}'
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [{
                    data: []
                }],
            }

            // 发送ajax
            $.ajax({
                url: INIT_CHART,
                type: 'GET',
                dataType: 'JSON',
                success: function (res) {
                    if (res.data && res.data.length > 0) {
                        // 4. 使用 tickPositions 确保所有日期都有刻度线 (您已添加，保留)
                        config.xAxis.tickPositions = res.data.map(function (item) {
                            return item[0];
                        });
                    }
                    config.series[0].data = res.data
                    var chart = Highcharts.chart('charts', config);
                }
            })
        }
    </script>
{% endblock %}